import { Chart } from '@antv/g2';
import { useEffect } from 'react';
import JSONEditor from "@/pages/antv/components/JSONEditorComponent";
import { useState } from 'react';
import { Button } from 'antd';

export default function antvPage() {
  const option = {
    x: "月份",
    y: "月均降雨量",
    color: "name",
    type: "stackY",
    data: [
      { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
      { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
      { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
      { name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
      { name: 'London', 月份: 'May', 月均降雨量: 47 },
      { name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
      { name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
      { name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
      { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
      { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
      { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
      { name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
      { name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 },
      { name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
      { name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
      { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 },
    ]
  }
  //let chart: any;
  let [data, setData] = useState(option);

  function showData() {
    // 初始化图表实例
    let chart = new Chart({
      container: 'container',
      autoFit: true,
    });
    chart
      .interval()
      .data(data.data)
      .encode('x', data.x)
      .encode('y', data.y)
      .encode('color', data.color)
      .transform({ type: 'stackY' })
      .interaction('elementHighlight', { background: true });

    // 渲染可视化
    chart.render();
  }


  // 准备数据
  useEffect(() => {
    showData()
    return () => {
      //chart.destroy();
    }
  }, [])

  return (
    <div>
      <div id="container" ></div>
      <Button onClick={() => {
        showData()
      }}> 提交 </Button>
      <JSONEditor option={data} onDataChange={(e) => {
        setData(e.json)
      }}></JSONEditor>
    </div>
  );
}

antvPage.route = {
  [MENU_TITLE]: "简单堆叠柱形图",
  [MENU_PATH]: "/antv/g2/t3",
};
